元件中資料與事件的傳遞

• 理解了這些，為自定義元件增加 v-model 支援就非常簡單。範例程式如下：

<div id="Application">
    <my-input v-model="inputText"></my-input>
    <div>{{inputText}}</div>
    <button @click="this.inputText = ''">清空</button>
</div>

<script>
    const App = Vue.createApp({
        data(){
            return {
                inputText:""
            }
        }
    })
    const inputComponent = {
        props:["modelValue"],
        methods:{
            action(event){
                this.$emit('update:modelValue', event.target.value)
            }
        },
        template:'<div><span>輸入框：</span><input :value="modelValue"@input="action"/></div>'
    }
    App.component("my-input", inputComponent)
    App.mount("#Application")
</script>

• 執行上面的程式，你會發現v-model指令已經可以正常執行了。
• 其實，所有支援v-model指令的元件中預設都會提供一個名為model Value的屬性(屬性名稱是固定的)，而元件內部的內容發生變化後，向外傳遞的事件為update:modelValue(事件名稱也是固定的)，並且在事件傳遞時會將元件內容作為參數傳遞。
• 因此，要讓自定義元件能夠使用v-model指令，只需要接照正確的規範來定義元件即可!